<template>
	<view class="sl-list" @click="editItem">
		<view class="sl-list-left">
			<text v-if="required" class="is-required">*</text>
			<text>{{title}}</text>
		</view>
		<view class="sl-list-right" :style="{color:rightColor}" @reviseData="reviseData" v-html="rightText">

		</view>
		<image v-if="showArrow" src="@/static/image/right-arrow.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		name: 'SlList',
		props: {
			title: {
				type: String,
				default: ''
			},
			showArrow: {
				// 是否显示箭头
				type: [Boolean, String],
				default: true
			},
			rightText: {
				// 右侧文字内容
				type: String,
				default: ''
			},
			required: {
				type: Boolean,
				default: false
			},
			rightColor: {
				type: String,
				default: '#666666'
			},
			reviseType: {
				type: String,
				default: 'input'
			},
			fieldModel:[Object]

		},
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {
			editItem() {
				if (this.showArrow == true) {
					uni.navigateTo({
						url: `/components/edit-list/edit-list?reviseType=${this.reviseType}&fieldModel=${JSON.stringify(this.fieldModel)}`
					})
				}

			},

		}
	}
</script>

<style lang="less" scoped>
	.sl-list {
		display: flex;
		align-items: center;
		padding: 28rpx 30rpx 26rpx 34rpx;
		border-bottom: 2rpx solid #F4F5F9;
		line-height: 1;
		background: #fff;

		.sl-list-left {
			color: #333333;
			font-size: 30rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
		}

		.is-required {
			color: #B8212B;
			margin-right: 8rpx;
		}

		.sl-list-right {
			color: #666;
			flex: 1;
			text-align: right;
			font-size: 28rpx;
		}

		image {
			margin-left: 16rpx;
			width: 24rpx;
			height: 24rpx;
		}

	}
</style>
